import 'package:auto_route/auto_route.dart';
import 'package:convergence_media/features/user/entities/me_model.dart';
import 'package:convergence_media/gen/assets.gen.dart';
import 'package:convergence_media/navigator/app_router.dart';
import 'package:extended_nested_scroll_view/extended_nested_scroll_view.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

@RoutePage()
class MeScreen extends StatelessWidget {
  const MeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    final themeData = Theme.of(context);
    return AutoTabsRouter.tabBar(
      routes: const [
        MessageRoute(),
        ScoreRoute(),
      ],
      builder: (context, child, tabController) {
        return SafeArea(
          child: Material(
            color: Colors.white,
            child: ExtendedNestedScrollView(
              headerSliverBuilder: (context, innerBoxIsScrolled) {
                return [
                  SliverToBoxAdapter(
                    child: _UserInfoBar(themeData: themeData),
                  ),
                  SliverAppBar(
                    expandedHeight: 56.r,
                    floating: true,
                    pinned: true,
                    backgroundColor: Colors.white,
                    leading: const SizedBox.shrink(),
                    flexibleSpace: PreferredSize(
                      preferredSize: Size(double.infinity, 35.r),
                      child: _TabBar(
                        themeData: themeData,
                        tabController: tabController,
                      ),
                    ),
                  ),
                ];
              },
              body: child,
            ),
          ),
        );
      },
    );
  }
}

class _TabBar extends StatelessWidget {
  const _TabBar({
    required this.themeData,
    required this.tabController,
  });

  final ThemeData themeData;
  final TabController tabController;

  @override
  Widget build(BuildContext context) {
    return TabBar(
      controller: tabController,
      labelColor: Colors.black,
      indicatorSize: TabBarIndicatorSize.label,
      dividerColor: Colors.black,
      labelStyle: TextStyle(
        color: Colors.black,
        fontSize: 18.sp,
        fontWeight: FontWeight.bold,
      ),
      labelPadding:EdgeInsets.symmetric(horizontal: 16.r),
      indicatorWeight:2.r,
      indicatorColor: themeData.primaryColor,
      unselectedLabelStyle: TextStyle(
        color: const Color(0xff999999),
        fontSize: 18.sp,
      ),
      padding: EdgeInsets.symmetric(
        horizontal: 78.r,
      ),
      tabs: const [
        Tab(
          text: '消息',
        ),
        Tab(
          text: '积分',
        ),
      ],
    );
  }
}

class _UserInfoBar extends StatelessWidget {
  const _UserInfoBar({
    required this.themeData,
  });

  final ThemeData themeData;

  @override
  Widget build(BuildContext context) {
    const meModel = MeModel(
      avatar: 'avatar',
      nickname: 'nickname',
      score: 0,
      lv: 8,
      describe: 'describe',
      city: 'city',
      sex: 0,
      like: 276,
      collect: 130,
      follow: 15,
      fans: 102,
    );
    return Container(
      width: 411.r,
      height: 306.r,
      padding: EdgeInsets.symmetric(
        horizontal: 28.r,
        vertical: 20.r,
      ),
      decoration: BoxDecoration(color: themeData.primaryColor),
      child: Column(
        children: [
          SizedBox(
            height: 25.r,
          ),
          Row(
            children: [
              Assets.images.mine.more.image(
                width: 28.r,
                height: 28.r,
              ),
              const Spacer(),
              Assets.images.mine.scan.image(
                width: 28.r,
                height: 28.r,
              ),
            ],
          ),
          SizedBox(
            height: 16.r,
          ),
          // const _UserInfo(),
          const _FakeUserInfo(meModel: meModel),
          SizedBox(
            height: 25.r,
          ),
          const _FollowLikeCollectFans(meModel: meModel),
          SizedBox(
            height: 26.r,
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              _IconTextOpacityButton(
                icon: Assets.images.mine.post,
                text: '我的发布',
              ),
              _IconTextOpacityButton(
                icon: Assets.images.mine.order,
                text: '购物车',
              ),
              _IconTextOpacityButton(
                icon: Assets.images.mine.log,
                text: '我的订单',
              ),
            ],
          ),
        ],
      ),
    );
  }
}

class _IconTextOpacityButton extends StatelessWidget {
  const _IconTextOpacityButton({
    required this.icon,
    required this.text,
  });
  final AssetGenImage icon;
  final String text;

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 114.r,
      height: 36.r,
      decoration: BoxDecoration(
        color: const Color(0xff383838).withOpacity(0.2),
        borderRadius: BorderRadius.circular(5.r),
      ),
      alignment: Alignment.center,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          icon.image(
            width: 24.r,
            height: 24.r,
          ),
          SizedBox(
            width: 11.r,
          ),
          Text(
            text,
            style: TextStyle(
              fontSize: 14.sp,
              color: Colors.white,
            ),
          ),
        ],
      ),
    );
  }
}

class _FollowLikeCollectFans extends StatelessWidget {
  const _FollowLikeCollectFans({
    required this.meModel,
  });

  final MeModel meModel;

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        _FollowLikeCollectFansItem(
          text1: meModel.follow,
          text2: '关注',
        ),
        _FollowLikeCollectFansItem(
          text1: meModel.fans,
          text2: '粉丝',
        ),
        _FollowLikeCollectFansItem(
          text1: meModel.like,
          text2: '获赞',
        ),
        _FollowLikeCollectFansItem(
          text1: meModel.collect,
          text2: '收藏',
        ),
        Container(
          width: 114.r,
          height: 36.r,
          decoration: BoxDecoration(
            color: const Color(0xff383838).withOpacity(0.2),
            borderRadius: BorderRadius.circular(5.r),
          ),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            mainAxisSize: MainAxisSize.min,
            children: [
              Assets.images.mine.card.image(
                width: 21.r,
                height: 21.r,
              ),
              SizedBox(
                width: 10.r,
              ),
              Text(
                '我的卡包',
                style: TextStyle(fontSize: 14.sp, color: Colors.white),
              ),
            ],
          ),
        ),
      ],
    );
  }
}

class _FakeUserInfo extends StatelessWidget {
  const _FakeUserInfo({required this.meModel});

  final MeModel meModel;

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        SizedBox(
          width: 60.r,
          height: 60.r,
          child: Image.network(meModel.avatar),
          //  Image.memory(
          //   base64Decode(meModel.avatar.split(',')[1]),
          //   excludeFromSemantics: true,
          //   errorBuilder: (context, error, stackTrace) {
          //     const defaultAvatar =
          //         'https://img.js.design/assets/img/64c0857e9c7c66fb2d8f7f58.png';
          //     return Image.network(defaultAvatar);
          //   },
          // ),
        ),
        SizedBox(
          width: 19.r,
        ),
        Expanded(
          child: Column(
            children: [
              _UserNameLvSex(meModel: meModel),
              SizedBox(
                height: 2.r,
              ),
              _EditAddPerson(meModel: meModel),
            ],
          ),
        ),
      ],
    );
  }
}

class _FollowLikeCollectFansItem extends StatelessWidget {
  const _FollowLikeCollectFansItem({
    required this.text1,
    required this.text2,
  });

  final int text1;
  final String text2;

  @override
  Widget build(BuildContext context) {
    return Flexible(
      child: Column(
        children: [
          Text(
            text1.toString(),
            style: TextStyle(color: Colors.white, fontSize: 15.sp),
          ),
          SizedBox(
            height: 5.r,
          ),
          Text(
            text2,
            style: TextStyle(color: Colors.white, fontSize: 12.sp),
          ),
        ],
      ),
    );
  }
}

class _EditAddPerson extends StatelessWidget {
  const _EditAddPerson({
    required this.meModel,
  });

  final MeModel meModel;

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Expanded(
          child: Text(
            meModel.describe,
            style: TextStyle(
              fontSize: 13.sp,
              color: Colors.white,
            ),
          ),
        ),
        const _OpacityButton(text: '编辑资料'),
        const _OpacityButton(text: '添加好友'),
      ],
    );
  }
}

class _OpacityButton extends StatelessWidget {
  const _OpacityButton({
    required this.text,
  });

  final String text;

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () {},
      child: Container(
        width: 72.r,
        height: 24.r,
        margin: EdgeInsets.symmetric(
          horizontal: 4.r,
        ),
        padding: EdgeInsets.symmetric(horizontal: 1.r),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(90.r),
          color: Colors.black.withOpacity(0.2),
        ),
        alignment: Alignment.center,
        child: Text(
          text,
          style: TextStyle(
            fontSize: 13.sp,
            color: Colors.white,
          ),
        ),
      ),
    );
  }
}

class _UserNameLvSex extends StatelessWidget {
  const _UserNameLvSex({
    required this.meModel,
  });

  final MeModel meModel;

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Text(
          meModel.nickname,
          style: TextStyle(
            fontSize: 20.sp,
            fontWeight: FontWeight.bold,
            color: Colors.white,
          ),
        ),
        Container(
          margin: EdgeInsets.symmetric(
            horizontal: 4.r,
          ),
          padding: EdgeInsets.symmetric(
            horizontal: 8.r,
            vertical: 1.r,
          ),
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(5.r),
            color: Colors.amber,
          ),
          child: Text(
            'LV${meModel.lv}',
            style: TextStyle(
              fontSize: 13.sp,
              color: Colors.white,
              fontWeight: FontWeight.normal,
            ),
          ),
        ),
        Assets.images.mine.male.image(
          width: 17.r,
          height: 17.r,
        ),
      ],
    );
  }
}
